<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ArkTS Web交互</title>

    <style>
        body {
          font-size: 28px;          /* 整体文字放大 */
          padding: 20px;
        }

        button {
          font-size: 32px;          /* 按钮文字放大 */
          padding: 20px 40px;       /* 按钮内边距放大 */
          border-radius: 12px;      /* 圆角更大 */
          min-width: 200px;         /* 最小宽度 */
          margin: 10px;
        }

        #result {
          font-size: 30px;          /* 结果文字放大 */
          margin-top: 30px;
          padding: 20px;
          background-color: #e6f7ff;
          border: 2px solid #91d5ff;
          border-radius: 8px;
        }

        #arktsMessage {
          font-size: 28px;
          margin-top: 20px;
          padding: 20px;
          background-color: #f6ffed;
          border: 2px solid #b7eb8f;
          border-radius: 8px;
          min-height: 60px;
        }
    </style>
</head>

<body>
    <h1>ArkTS与JS双向通信</h1>
    
    <!-- JS发送消息给ArkTS的按钮 -->
    <button onclick="sendToArkTS()">JS发送消息给ArkTS</button>
    <div id="result">等待ArkTS响应...</div>
    
    <!-- 显示ArkTS发送的消息 -->
    <h2>ArkTS发送的消息：</h2>
    <div id="arktsMessage">等待ArkTS发送消息...</div>

<script>
    // JS发送消息给ArkTS
    function sendToArkTS() {
        console.log("📤 JS准备发送消息给ArkTS...");
        
        if (window.ArkTSBridge && typeof window.ArkTSBridge.callFromJS === 'function') {
            try {
                const result = window.ArkTSBridge.callFromJS("你好，我是JS！时间: " + new Date().toLocaleTimeString());
                document.getElementById("result").innerText = "ArkTS返回：" + result;
                console.log("✅ ArkTS返回：" + result);
            } catch (error) {
                console.error("❌ 调用ArkTS失败:", error);
                document.getElementById("result").innerText = "调用失败: " + error.message;
            }
        } else {
            console.error("❌ ArkTSBridge不可用");
            document.getElementById("result").innerText = "ArkTSBridge不可用";
        }
    }

    // 接收ArkTS发送的消息
    function receiveFromArkTS(msg) {
        console.log("📥 JS收到ArkTS消息:", msg);
        document.getElementById("arktsMessage").innerHTML = 
            "<strong>收到消息:</strong> " + msg + 
            "<br><small>接收时间: " + new Date().toLocaleTimeString() + "</small>";
    }

    // 页面加载完成
    document.addEventListener('DOMContentLoaded', function() {
        console.log('✅ JS页面加载完成');
        
        // 检查ArkTSBridge是否可用
        setTimeout(function() {
            if (window.ArkTSBridge) {
                console.log('✅ ArkTSBridge已准备就绪');
            } else {
                console.log('⚠️ 等待ArkTSBridge注册...');
            }
        }, 1000);
    });
</script>
</body>
</html>